<template>
	<view class="container">
		<date-select-view @change="dateChange" :defaultTime="daily"></date-select-view>
		<children-base-top-view
			:name="children.name"
			:gender="children.gender"
			:month="children.month"
			:imgUrl="children.imgUrl"
			:birthday="children.birthday"
			/>
		<u-collapse v-if="loaded" ref="uCollapse"
			:accordion="false"
			:head-style="headStyle"
			class="collapse">
			<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index"
				:open="true"
				@change="itemChange" :index="index">
				<view class="collapse-item">
					<view  v-for="(record, recordIndex) in item.list"
						:options="options"
						:key="record.id" 
						class="item">
						<temperature v-if="item.type===0" :record="record"></temperature>
						<food v-else-if="item.type === 1" :record="record"></food>
						<defecation v-else-if="item.type === 2" :record="record"></defecation>
						<sleep v-else-if="item.type === 3" :record="record"></sleep>
						<handover v-else-if="item.type === 4" :record="record"></handover>
						<view v-else></view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
		
		<u-empty v-if="loaded && !itemShow" class="noContent" text="暂时没有宝宝的一日记录"></u-empty>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		getTemperatureList,
		getFeedingList,
		getSleepList,
		getHandoverList,
		getPottyList,
		
		getTemperatureListP,
		getFeedingListP,
		getSleepListP,
		getHandoverListP,
		getPottyListP
	} from '@/api/record.js'
	import ChildrenBaseTopView from '@/components/children-base-top-view.vue'
	import DateSelectView from '@/components/date-select-view.vue'
	import Temperature from './components/temperature.vue'
	import Food from './components/food.vue'
	import Defecation from './components/defecation.vue'
	import Sleep from './components/sleep.vue'
	import Handover from './components/handover.vue'
	
	import appMixin from '@/mixins/app.js'
	const Templey = [{
					head: "体温状况",
					open: false,
					list: [],
					tchGet: getTemperatureList,
					pGet: getTemperatureListP,
					type: 0,
				}, {
					head: "饮食方面",
					open: false,
					list: [],
					tchGet: getFeedingList,
					pGet: getFeedingListP,
					type: 1,
				},{
					head: "如厕",
					open: false,
					list: [],
					tchGet: getPottyList,
					pGet: getPottyListP,
					type: 2,
				}, {
					head: "睡眠情形",
					open: false,
					list: [],
					tchGet: getSleepList,
					pGet: getSleepListP,
					type: 3,
				}, {
					head: "用药需求",
					open: false,
					list: [],
					tchGet: getHandoverList,
					pGet: getHandoverListP,
					type: 4,
				}];
	export default {
		mixins: [appMixin],
		components: {
			ChildrenBaseTopView,
			Temperature,
			Food,
			Defecation,
			Sleep,
			Handover,
			DateSelectView
		},
		data() {
			return {
				loaded: false,
				children: null,
				itemShow: false,
				itemList: [],
				daily : '',
				
				headStyle: {
					'color': '#333333',
					'font-weight': 'bold',
					'font-size': '30rpx',
				},
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#DA473A'
						}
					}
				],
			}
		},
		computed: {
			...mapState({
				parentInfo: state => state.user.parentInfo,
			}),
		},
		onLoad(options) {
			console.log(options);
			this.children = options;
			if (this.appType === 'app-p' || this.appType === 'mp-p') {
				console.log(this.parentInfo);
				this.children = this.parentInfo.defaultBaby;
			}
			this.daily = this.formatTimestamp(Date.now(), 'yyyy/mm/dd');
			if (!this.$u.test.isEmpty(options.daily)) {
				this.daily = options.daily
			}
			this.init();
		},
		methods: {
			dateChange(res) {
				console.log(res);
				this.daily = this.formatTimestamp(res.timestamp, 'yyyy/mm/dd');
				this.init();
			},
			
			async init() {
				this.loaded = false;
				this.itemShow = false;
				this.itemList = [ ...Templey ];
				console.log(this.itemList)
				uni.showLoading({})
				try{
					for (let index = this.itemList.length - 1; index >= 0; index--) {
						let item = this.itemList[index];
						await this.getData(item, index);
					}
				}finally {
					this.loaded = true;
					uni.hideLoading()
				}
				console.log('123456')
				console.log(this.itemList)
			},
			itemChange(res) {
				console.log(res);
				let show = res.show;
				let index = res.index;
				let item = this.itemList[index];
				if (!show) {
					return;
				}
			},
			
			async getData(item, index) {
				let getFunction = null;
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					getFunction = item.tchGet;
				} else if (this.appType === 'app-p' || this.appType === 'mp-p') {
					getFunction = item.pGet;
				}
				if (getFunction === null) {
					return;
				}
				await getFunction(this.children.id, this.daily).then(res => {
					console.log(res);
					item.list = res.data;
					if (item.list.length === 0) {
						this.itemList.splice(index, 1);
					} else {
						this.itemShow = true;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 20rpx;
	}
	.collapse{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.collapse-item{
		background: #FFFFFF;
		border-radius: 20px;
		
		.item{
		}
	}
	
	.line{
		width: 100%;
		height: 1px;
		background: #E8E8E8;
	}
</style>
